<template>
  <!-- 员工页面 -->
  <div class="employees">
    <el-card>
      <div style="text-align: right">
        <el-button
          v-if="mixinPermission('employees_import_btn')"
          type="primary"
          size="small"
          @click="$router.push('/import')"
        >导入</el-button>
        <!-- 导出所有的员工 -->
        <el-button
          type="primary"
          size="small"
          @click="exportUser"
        >导出</el-button>
        <el-button
          type="primary"
          size="small"
          @click="addEvent"
        >+ 新增员工</el-button>
      </div>
    </el-card>
    <el-card style="margin-top: 15px">
      <el-table :data="list" border>
        <el-table-column label="序号" width="60px">
          <template v-slot="{ $index }">
            {{ (page.page - 1) * page.size + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username" sortable />
        <el-table-column label="用户头像" prop="staffPhoto">
          <template v-slot="{ row }">
            <img
              v-errorimg
              class="avatar"
              :src="row.staffPhoto"
              alt=""
              @click="imgClick(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column label="手机" prop="mobile" sortable />
        <el-table-column label="工号" prop="workNumber" sortable />
        <el-table-column label="聘用形势" prop="formOfEmployment" sortable>
          <template v-slot="{ row }">
            <div>
              {{ row.formOfEmployment | formatType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" sortable />
        <el-table-column label="入职时间" prop="timeOfEntry" sortable>
          <template v-slot="{ row }">
            <div v-formatTime="row.timeOfEntry" />
          </template>
        </el-table-column>
        <el-table-column label="是否在职" prop="enableState" sortable>
          <template v-slot="{ row }">
            <div>
              {{ row.enableState | formatState }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="状态" prop="username" sortable /> -->
        <el-table-column label="操作" width="300px">
          <template v-slot="{ row }">
            <el-button type="text" @click="look(row.id)">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="roleClick(row.id)">角色</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <div style="text-align: right; padding-top: 20px">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[1, 5, 10, 100, 200, 300]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增员工弹框组件 -->
    <Add ref="add" v-model="show" @getData="getData" />
    <!-- 员工头像生成二维码 -->
    <el-dialog :visible.sync="showQrcode" title="二维码">
      <div style="text-align: center">
        <canvas ref="canvas" />
      </div>
    </el-dialog>
    <!-- 分配角色弹框组件 -->
    <Role ref="role" />
  </div>
</template>

<script>
// 导入分配角色组件
import Role from './components/Role.vue'
// 导入接口
import { sysUser, sysUserDelete } from '@/api/employees'
// 导入枚举数据
import employeesData from '@/api/constant/employees'
// 导入cookieJs本地存储插件
import jsCookie from 'js-cookie'
// 导入新增员工组件
import Add from './components/Add'
// 导入员工导出对应方法
import { export_json_to_excel } from '@/vendor/Export2Excel'
// 导入二维码生成组件
import Qrcode from 'qrcode'
export default {
  components: {
    Add,
    Role
  },
  filters: {
    // 聘用形势
    formatType(id) {
      const result = employeesData.hireType.find((item) => item.id === +id)
      return result ? result.value : '--'
    },
    // 在职状态
    formatState(id) {
      const result = employeesData.workingState.find((item) => +item.id === +id)
      return result ? result.value : '--'
    }
  },
  data() {
    return {
      show: false,
      list: [{}],
      page: {
        page: 1, //	是	1	页码
        size: +jsCookie.get('employees_size') || 10, //	是	10	每页条数
        total: 100
      },
      showQrcode: false // 控制头像二维码是否显示
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取员工列表函数
    async getData() {
      const res = await sysUser(this.page)
      // 列表数据存储
      this.list = res.data.rows
      this.page.total = res.data.total
    },

    // 页容量切换
    handleSizeChange(size) {
      this.page.size = size
      this.getData()
      // 改变时，将页容量存储到本地
      jsCookie.set('employees_size', size)
    },

    // 页码切换
    handleCurrentChange(page) {
      this.page.page = page
      this.getData()
    },

    // 新增员工点击事件
    addEvent() {
      this.show = true
    },

    // 删除按钮点击事件
    del(id) {
      this.$confirm('您确定要删除该员工吗?', '温馨提示')
        .then(async() => {
          await sysUserDelete(id)
          // 提示
          this.$message.success('删除成功')
          // 刷新列表数据
          // 判断当前数据是否是当前页的最后一行且页数大于1
          if (this.page.page > 1 && this.list.length <= 1) {
            // 如果是则页码减1
            this.page.page--
          }
          // 属性列表数据
          this.getData()
        })
        .catch()
    },

    // 导出按钮点击事件
    async exportUser() {
      // 导出所有员工数据
      //   1.获取到所有的员工数据(设置一个超大的页容量数据)
      //   2.写好表头(中文)
      //   3.将获取到的数据转换成导出的数据格式
      //   4.调用导出方法

      const res = await sysUser({
        page: 1,
        size: 99999
      })
      console.log(res.data.rows)
      // 写好数据转换的规则
      const rules = {
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正时间: 'correctionTime',
        部门: 'departmentName',
        是否在职: 'enableState',
        聘用形势: 'formOfEmployment'
      }

      // 转换数据格式
      const newArr = res.data.rows.map((item) => {
        const arr = []
        Object.values(rules).forEach((item2) => {
          arr.push(item[item2])
        })
        return arr
      })
      // console.log(newArr)

      // 调用导出表格的方法，
      export_json_to_excel({
        header: Object.keys(rules),
        data: newArr,
        filename: '员工列表'
      })
    },

    // 查看按钮点击事件
    look(id) {
      this.$router.push('/userlook/' + id)
    },

    // 头像点击事件
    imgClick(avatarUrl) {
      if (avatarUrl && avatarUrl.trim()) {
        this.showQrcode = true
        // nextTcik,等到它前面的代码执行完在执行(它是一个异步,同步代码都在他前面执行)
        this.$nextTick(() => {
          Qrcode.toCanvas(this.$refs.canvas, avatarUrl, {
            width: 380,
            height: 380
          })
        })
      }
    },

    // 分配按钮点击事件
    roleClick(id) {
      this.$refs.role.isShow = true
      // 调用子组件函数，获取当前用户角色信息
      this.$refs.role.getUserRole(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.employees {
  padding: 15px;
  .avatar {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
}
</style>
